<template>
    <div class="qilin-viewQualification">
        <el-dialog :visible.sync="ownDialogConfig.isShow" :title="ownDialogConfig.title"
            width="600px" center append-to-body :before-close="handleClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-row class="qilin-table-row">
                <template v-for="(item,index) in viewConfig.ranksConfig">
                    <el-col
                        :key="index"
                        :span="item.col || 12"
                        v-if="!item.type || item.type === 'text' "
                        class="qilin-table-row-col"
                    >
                        <template v-if="!item.ellipsis">
                            <label class="qilin-table-row-col-label">
                                <span class="ellipsis">{{item.label}}</span>
                            </label>
                        </template>
                        <template v-else>
                            <el-tooltip placement="left" effect="dark">
                                <div slot="content">{{item.label}}</div>
                                <label class="qilin-table-row-col-label">
                                    <span class="ellipsis">{{item.label}}</span>
                                </label>
                            </el-tooltip>
                        </template>
                        <span class="qilin-table-row-col-value">{{
                                viewConfig.ranksData[item.value]?viewConfig.ranksData[item.value]:"-"
                            }}</span>
                    </el-col>
                    <el-col
                        :key="index"
                        :span="item.col || 12"
                        v-if="item.type === 'image' "
                        class="qilin-table-row-col"
                    >
                        <template v-if="!item.ellipsis">
                            <label class="qilin-table-row-col-label ellipsis">{{item.label}}</label>
                        </template>
                        <template v-else>
                            <el-tooltip placement="left" effect="dark">
                                <div slot="content">{{item.label}}</div>
                                <label class="qilin-table-row-col-label ellipsis">{{item.label}}</label>
                            </el-tooltip>
                        </template>
                        <span class="qilin-table-row-col-value">
                            <template v-if="viewConfig.ranksData[item.value] && viewConfig.ranksData[item.value].length > 0">
                                <span v-for="ite in viewConfig.ranksData[item.value]" :key="ite.attachmentId">
                                    <el-image :src="uploadImageUrl+ite.filePath"
                                        :preview-src-list="[uploadImageUrl+ite.filePath]"
                                    ></el-image>
                                </span>
                            </template>
                            <span v-else>暂无附件</span>
                        </span>
                    </el-col>
                </template>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
export default {
    inject:["uploadImageUrl"],
    data(){
        return {
            ownDialogConfig:{ //弹窗自身的配置
                isShow:false,
                title:"查看"
            },
            viewConfig:{
                ranksConfig:[
                    {
                        type:"text",
                        label:"员工编码",
                        value:"employeeCode",
                        col:12
                    },
                    {
                        type:"text",
                        label:"姓名",
                        value:"employeeName",
                        col:12
                    },
                    {
                        type:"text",
                        label:"部门",
                        value:"employeeDepartment",
                        col:12
                    },
                    {
                        type:"text",
                        label:"证书名称",
                        value:"certificateName",
                        col:12
                    },
                    {
                        type:"text",
                        label:"证书有效期",
                        value:"certificateIndate",
                        ellipsis:true,
                        col:12
                    },
                    {
                        type:"text",
                        label:"资质等级",
                        value:"certificationGrade",
                        col:12
                    },
                    {
                        type:"text",
                        label:"资质积分",
                        value:"certificationIntegral",
                        col:24
                    },
                    {
                        type:"text",
                        label:"备注",
                        value:"remark",
                        col:24
                    },
                    {
                        type:"image",
                        label:"附件",
                        value:"attachments",
                        col:24
                    }
                ],
                ranksData:{}
            }
        }
    },
    methods:{
        // 初始化查看渲染事件监听
        initView(data){
            this.viewConfig.ranksData={...data};
            this.ownDialogConfig.isShow=true;
        },
        // 关闭弹窗事件监听
        handleClose(){
            this.ownDialogConfig.isShow=false;
        }
    }
}
</script>
<style lang="scss" scoped>
.qilin-table-row{
    border:1px solid $color-border;
    border-left:none;
    overflow:hidden;
    border-radius:6px;
    >.qilin-table-row-col{
        border:1px solid $color-border;
        border-left:none;
        border-right:none;
        margin-top:-1px;
        margin-bottom:0;
        display:flex;
        &:first-of-type{
            border-radius:6px 0 0 0;
            >.qilin-table-row-col-label{
                border-radius:6px 0 0 0;
            }
        }
        &:last-of-type{
            margin-bottom:-1px;
        }
        >.qilin-table-row-col-label{
            border-left:1px solid $color-border;
            border-right:1px solid $color-border;
            padding: 10px 12px;
            width: 50%;
            background-color:$color-background-title;
            color:$color-text-title;
            font-weight:bolder;
            display:flex;
            align-items:center;
            &>span.ellipsis{
                display: inline-block;
                width:100%;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
        }
        >.qilin-table-row-col-value{
            padding:10px;
            color:$color-text-common;
            width:50%;
            >span{
                margin:0 10px 10px 0;
                >.el-image{
                    width:80px;
                    height:80px;
                    border-radius:5px;
                }
            }
        }
        &.el-col-24{
            >label{
                width:16.66665%;
            }
            >span{
                width:83.33335%;
            }
        }
        &.el-col-16{
            >label{
                width:25%;
            }
            >span{
                width:75%;
            }
        }
        &.el-col-12{
            >label{
                width:33.33335%;
            }
            >span{
                width:67.66665%;
            }
        }
    }
}
</style>
